import React from 'react'

// (e) => {
//     if (e.keyCode === 13) {
//       if (!name) return
//       dispatch({ type: 'todos/add', payload: name })
//       setName('')
//     }
//   }

import { useState } from 'react'

import { useDispatch } from 'react-redux'

import { todoADDActions } from '../store/actions/todoActions'


export default function Header () {

    const [name, setName] = useState('初始值')

    const dispatch = useDispatch()

    const handlerAdditem = (e) => {
        if (e.keyCode === 13) {

            if (!name) return

            const payload = { id: Math.random(), name: name, isDone: false }

            // dispatch({ type: 'todo/add', payload })

            todoADDActions(dispatch, payload)

            setName('默认值')

        }


    }


    return (
        <header className="header">
            <h1>todos</h1>
            <input
                onKeyUp={handlerAdditem}
                className="new-todo"
                value={name}
                onChange={(e) => {
                    setName(e.target.value.trim())
                }}
                placeholder="接下来打算做点啥?"
                autoFocus
            />
        </header>
    )
}
